<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="子路由1" name="1"></el-tab-pane>
      <el-tab-pane label="子路由2" name="2"></el-tab-pane>
    </el-tabs>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component"></component>
      </keep-alive>
    </router-view>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const activeName = ref('1')

watch(activeName, (v) => {
  switch (v) {
    case '2':
      router.push('/nestedRouterTest/routerTest2')
      break
    case '1':
    default:
      router.push('/nestedRouterTest/routerTest')
      break
  }
})
</script>

<style scoped lang="scss"></style>
